<template>
  <div id="app" ref="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
  export default {
    name: "App",
    provide() {
      return { reload: this.reload, };
    },
    data() {
      return {
        isRouterAlive: true,
      };
    },
    methods: {
      reload() { //初始化
        this.isRouterAlive = false;
        this.$nextTick(() => (this.isRouterAlive = true));
      },
    },
    created() {
      // 在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem("store")) {
        this.$store.replaceState(
          Object.assign({},
            this.$store.state,
            JSON.parse(sessionStorage.getItem("store"))
          )
        );
      }

      // 在页面刷新时将vuex里的信息保存到sessionStorage里
      // beforeunload事件在页面刷新时先触发
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem("store", JSON.stringify(this.$store.state));
      });
    },
  };
</script>

<style lang="scss">
  #app {
    font-family: 'PingFang SC', 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: $themeColor url(../static/img/background.png) no-repeat;
    color: $fontColor;
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
  }

  .relativeContainer {
    position: relative;
  }

  .absoluteContainer {
    position: absolute;
  }

  .ellipse {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .line {
    @include line;
  }
</style>
<style lang='scss'>
  .el-submenu__title:hover {
    background-color: rgb(0, 4, 39) !important;
  }

  .el-table .cell {
    white-space: pre-line !important;
  }
</style>